import {defineComponent, PropType, reactive, computed, watch, markRaw} from 'vue';

import type {
  MdcCase
} from './process/processCaseString';
import {
  MD
} from "./markdown";
import {
  processHtmlString
} from './process/processHtmlString';

export const MdcCaseComponent = defineComponent({
  props: {
    content: {type: Object as PropType<MdcCase>, required: true}
  },
  setup(props){
    const state = reactive({
      Component: null as any,
      showCode: props.content.expand,
      style: null as null| string
    });

    const classes = computed(() => {
      return [
        'md-plus-case',
        {
          'md-plus-case--show-code': state.showCode,
        }
      ]
    });

    watch (()=>props.content, async val=>{
      if(!val.html){
        state.Component = null;
      }else {
        const {html} = val;

        //把解析出来的case里的```html```挂在全局上
        // (window as any).html = html;
        // console.log('window.html:',(window as any).html);
        const code = await processHtmlString(html);
        // console.log('code:',code);//{template: "\n<div>\n    <pl-form\n        ref=\"userForm\"\n       …/>\n        </pl-form-item>\n    </pl-form>\n</div>\n", script: {…}, style: null}

        if(!!code){
          Object.assign(state, {
              Component: markRaw({
                template: code.template,
                ...code.script
              }),
              style: code.style
            })
        }else {
          Object.assign(state,{
            Component: null,
            style: null
          })
        }

      }
    },{immediate: true});
    //↑ 注意 这里是异步的 (因为processHtmlString--->processScriptString--->buildDependency是异步的)

    const handler = {
      toggleCode: async ()=>{
        state.showCode = !state.showCode;
      },
      openRunPage: () => {
        //todo
      }
    };

    return () => {
      const {Component, style} = state;

      return (
        <div class={classes.value}>
          {
            !!props.content.title
            && (
              <h2 class='md-plus-case__h2'>
                <span>{props.content.title == `''` ? '' : props.content.title}</span>
                <div class="md-plus-case__h2__operator-box">
                  <span class="md-plus-case__h2__operator-box__close" onClick={handler.openRunPage}>
                    <span>在线调试</span>
                    <pl-icon icon="el-icon-debug-s"/>
                  </span>
                  <span onClick={handler.toggleCode} class="md-plus-case__h2__operator-box__toggle">
                    <span>{state.showCode ? '收起代码' : '查看代码'}</span>
                    <pl-icon icon="el-icon-d-arrow-left"/>
                  </span>
                </div>
              </h2>
            )
          }
          {
            !!props.content.desc && (<MD content={props.content.desc}/>)
          }
          {
            !!Component && <div
              class={'md-plus-case__wrapper' + (props.content.space ? ' md-plus-case__wrapper--space' : '')}>
              <Component/>
            </div>
          }
          {
            !!props.content.bottomDesc && (<div class="md-plus-case__desc"><MD content={props.content.bottomDesc}/></div>)
          }
          {
            !!style && (<style>{style}</style>)
          }
          {
            <div v-show={state.showCode}>
              {
                !!props.content.content && (<MD content={props.content.content}/>)
              }
              {
                !!Component && (<MD content={"```html\n" + props.content.html + "\n```"}
                                    class='md-plus-case-code'/>)
              }
              <div class="md-plus-case__h2__operator-box__toggle-wrapper">
                <div class="md-plus-case__h2__operator-box__toggle" onClick={handler.toggleCode}>
                  <span>收起代码</span>
                  <pl-icon icon="el-icon-d-arrow-left"/>
                </div>
              </div>
            </div>
          }
        </div>
      );
    };
  }
})
